<template>
  <div>
    <el-card class="login_box">
      <div style="text-align: center;font-weight: bold;font-size: 20px;margin-bottom: 20px">欢迎注册超市管理系统</div>
      <el-form :model="loginForm" label-position="bottom" label-width="130px" ref="loginFormRef" :rules="loginFormRules">
        <el-form-item label="用户名" prop="mgName">
          <el-input prefix-icon="iconfont icon-yonghu" v-model="loginForm.mgName" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mgMobile">
          <el-input prefix-icon="iconfont icon-shouji" v-model="loginForm.mgMobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="mgPwd">
          <el-input type="password" prefix-icon="iconfont icon-suo" v-model="loginForm.mgPwd" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="background-color: #dd2726;color: #fff;width:230px;" @click="registry">确定</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
var checkMobile = (rule, value, cb) => {
  let regMobile = /^1[3|4|5|7|8][0-9]\d{8}$/
  if (regMobile.test(value)) return cb()
  cb(new Error('请输入合法的手机'))
}
export default {
  name: 'Registry',
  data () {
    return {
      loginForm: {
        mgName: '',
        mgPwd: '',
        mgMobile: ''
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        mgName: [
          {required: true, message: '请输入登录名称', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur'}
        ],
        // 验证密码是否合法
        mgPwd: [
          {required: true, message: '请输入登录密码', trigger: 'blur'},
          {min: 6, max: 15, message: '长度在6到15个字符', trigger: 'blur'}
        ],
        mgMobile: [
          {
            required: true, message: '请输入手机', trigger: 'blur'
          },
          {
            validator: checkMobile, trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    registry () {
      this.$refs.loginFormRef.validate(valid => {
        if (!valid) return
        this.$axios
          .post('registry', this.loginForm)
          .then(resp => {
            console.log(resp)
            console.log(resp.data.desc)
            if (resp.data.status !== 200) return this.$message.error('注册失败')
            this.$message.success('注册成功')
            this.$router.push({path: '/registrySuccess'})
          })
      })
    }
  }
}
</script>

<style scoped>
.login_box{
  margin-top: 40px;
  margin-bottom: 40px;
  width:400px;
  height:350px;
  background-color:#fff;
  border-radius: 3px;
  margin-right:250px;
}
</style>
